import React, {useMemo,useEffect} from 'react';
import {ReloadOutlined,} from '@ant-design/icons';
import {Button, ConfigProvider, message } from 'antd';
import axios from 'axios';

const Context = React.createContext({
    name: 'Default',
});

const CardHeader = (props) => {
    const [messageApi, contextHolder] = message.useMessage();
    const refresh = () => {

        axios.post('/api/data/refresh', props.id)
            .then(req => {
                messageApi.success({
                    content:'已刷新！',
                    duration:[1.2],

                });
                props.onChange(req.data.data, req.data.sum)
            })
            .catch(error => {
                console.error('出错了:', error);
            });
    }
    const contextValue = useMemo(
        () => ({
            name: 'Ant Design',
        }),
        [],
    );
    return (
        // <Context.Provider value={contextValue}>
            <div>
                {contextHolder}
                {props.name}
                <ConfigProvider
                    theme={{
                        components: {
                            Button: {
                                defaultBg: "black",
                                defaultColor: "#fff",
                            }
                        }
                    }}
                >
                    <Button size="small" shape="circle" icon={<ReloadOutlined/>} style={{marginLeft: 15}}
                            onClick={refresh}>
                    </Button>
                </ConfigProvider>
            </div>
        // </Context.Provider>
    )
}


export default CardHeader